<template>
	<div class="fillWrap">
		<a-form
			layout="vertical"
			:model="formState"
			name="basic"
			autocomplete="off"
			@finish="onFinish"
			@finishFailed="onFinishFailed"
		>
			<a-form-item label="巡检路线名称" name="name" :rules="[{ required: true, message: '请填写巡检路线名称' }]">
				<a-input v-model:value="formState.name" />
			</a-form-item>
			<a-form-item label="巡检路线责任人" name="personLiable" :rules="[{ required: true, message: '请填写巡检路线责任人' }]">
				<a-input v-model:value="formState.personLiable" />
			</a-form-item>
			<!-- <a-form-item label="巡检时间周期" name="date" :rules="[{ required: true, message: '请选择巡检时间周期' }]">
				<a-select ref="select" v-model:value="formState.date">
					<a-select-option value="jack">Jack</a-select-option>
					<a-select-option value="lucy">Lucy</a-select-option>
					<a-select-option value="Yiminghe">yiminghe</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="开始时间" name="time" :rules="[{ required: true, message: '请选择时间' }]">
				<a-date-picker v-model:value="formState.time" />
			</a-form-item> -->
			<a-form-item>
				<!-- <a-button class="cancel">取消</a-button> -->
				<a-button type="primary" html-type="submit" :loading="loading">保存</a-button>
			</a-form-item>
		</a-form>
	</div>
</template>

<script setup name="fill">
import { reactive, ref } from 'vue';
const formState = reactive({
	name: '',
	personLiable: ''
});
const loading = ref(false);
const onFinish = values => {
	console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
	console.log('Failed:', errorInfo);
};
</script>

<style lang="less" scoped>
@bgcolor: rgba(242, 243, 245, 1);
.fillWrap {
	height: 100%;
	background-color: #fff;
	padding: 22px 30px;
	.ant-form {
		height: 100%;
		position: relative;
	}
	.ant-form-item:last-child {
		margin-bottom: 0;
		right: 0px;
		bottom: 0px;
		position: absolute;
		.cancel {
			margin-right: 8px;
		}
	}
	:deep(.ant-form-item-explain-error) {
		font-size: 12px;
	}
	:deep(.ant-input) {
		background: @bgcolor !important;
		border-color: @bgcolor;
		box-shadow: none;
	}
	:deep(.ant-select) {
		.ant-select-selector {
			background: @bgcolor !important;
			border-color: @bgcolor !important;
			box-shadow: none !important;
		}
	}
	:deep(.ant-picker) {
		width: 100%;
		background: @bgcolor !important;
		border-color: @bgcolor;
		box-shadow: none;
	}
}
</style>
